响应式原理-watch 函数的实现原理|Vue3原理 | 前端进阶之旅

# 前言

在组合式 API 中，我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数，watch 的第一个参数可以是不同形式的数据类型：它可以是一个 ref（包括计算属性）、一个响应式对象、一个 getter 函数、或多个数据源组成的数组。

const x = ref(0)
const y = ref(0)
const state = reactive({ num: 0 })

// 单个 ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

// getter 函数
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)

// 响应式对象
watch(
  state,
  (newState) => {
    console.log(`new state num is: ${newState.num}`)
  }
)

// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})

@前端进阶之旅: 代码已经复制到剪贴板

了解了一些基础的 watch 使用示例后，我们开始分析一下 watch 函数是如何实现的呢。

# 标准化 source

先来看一下 watch 函数实现的代码：

function watch(source, cb, options) {
  // ...
  return doWatch(source, cb, options)
}

function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EMPTY_OBJ) {
  // ...
}